// 1- 使用 lazy Suspense
import React, { lazy, Suspense } from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useRoutes } from "react-router-dom";

// 引入Loading
import Loading from "@/commponents/Loading";
// 引入拦截器
import AuthComponent from "@/commponents/AuthComponent";
import Index from "../pages/Index";
import { DatabaseOutlined, HomeOutlined ,MedicineBoxOutlined} from "@ant-design/icons";
// 2- 通过lazy引入组件
const lazyLoading = function (path: string) {
    const Com = lazy(() => import("@/pages/" + path));
    return (
        <Suspense fallback={<Loading />}>
            <Com></Com>
        </Suspense>
    )
}
export const routes = [

    {
        path: "/",
        element: (
            // 使用拦截
            <AuthComponent>
                {/* {lazyLoading("Index")} */}
                <Index/>
            </AuthComponent>
        ),
        // 1- 为children数据中的元素增加属性：label,isHide,icon
        children: [
            {
                // 主页
                label: "主页",
                path: "/",
                icon: <HomeOutlined />,
                element: lazyLoading("Home")
            }, {
                // 数据管理
                label: "数据管理",
                path: "/cmn",
                icon: <DatabaseOutlined />,
                element: <Outlet />,
                children: [
                    {
                        index: true,
                        isHide: true, // 是否隐藏
                        element: <Navigate to={"dict"} />
                    }, {
                        // 数据字典
                        label: "数据字典",
                        path: "/cmn/dict",
                        element: lazyLoading("cmn/dict")
                    }
                ]
            },{
                label:"医院管理",
                path:"/hospital",
                icon:<MedicineBoxOutlined />,
                element:<Outlet/>,
                children:[
                    {
                        index:true,
                        isHide:true,//是否隐藏
                        element:<Navigate to={"hospitalSet"}/>
                    },
                    {
                        // 医院设置
                        label:"医院设置",
                        path:"/hospital/hospitalSet",
                        element:lazyLoading("hospital/hospitalSet")
                    },
                    {
                        // 医院列表
                        label:"医院列表",
                        path:"/hospital/hospitalList",
                        element:lazyLoading("hospital/hospitalList")
                    }
                ]
            }
        ]
    }, {
        path: "/login",
        element: lazyLoading("Login")
    }, {
        path: "*",
        element: lazyLoading("NotFound")
    }
]

//  2- 回用于描述侧边栏的数据
export const renderMenuItem =()=>{
    return (routes.find(v=>v.path === "/")as any).children;
}

// 描述路由
export  default function(){
    const renderRouter = useRoutes(routes)
    return renderRouter;
}

